<template>
  <div class="app-container">
    <div class="total-layout">
      <el-row :gutter="20">
        <el-col :span="10">
          <div class="total-frame"  v-if="user.role===1">
            <img src="../assets/h.jpg"  class="total-icon">
            <div class="total-title">教练总数：</div>
            <div class="total-value">{{ count1 }}</div>
          </div>
          <div class="total-frame" v-if="user.role===2">
            <img src="../assets/h.jpg"  class="total-icon">
            <div class="total-title">会员卡余额：</div>
            <div class="total-value">{{ count11 }}</div>
          </div>
          <div class="total-frame" v-if="user.role===3">
            <img src="../assets/h.jpg"  class="total-icon">
            <div class="total-title">学员总数：</div>
            <div class="total-value">{{ count21 }}</div>
          </div>
        </el-col>
        <el-col :span="10" >
          <div class="total-frame" v-if="user.role===1">
            <img src="../assets/tab_function_default.jpg" class="total-icon">
            <div class="total-title">课程总数：</div>
            <div class="total-value">{{ count2 }}</div>
          </div>
          <div class="total-frame" v-if="user.role===2">
            <img src="../assets/tab_function_default.jpg" class="total-icon">
            <div class="total-title">预约课程总数：</div>
            <div class="total-value">{{ count12 }}</div>
          </div>
          <div class="total-frame" v-if="user.role===3">
            <img src="../assets/tab_function_default.jpg" class="total-icon">
            <div class="total-title">预约课程总数：</div>
            <div class="total-value">{{ count22 }}</div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="40" style="margin-top: 50px">
        <el-col :span="10">
          <div class="total-frame"  v-if="user.role===1">
            <img src="../assets/h.jpg"  class="total-icon">
            <div class="total-title">设备总数：</div>
            <div class="total-value">{{ count3 }}</div>
          </div>
          <div class="total-frame"  v-if="user.role===2">
            <img src="../assets/h.jpg"  class="total-icon">
            <div class="total-title">设备总数：</div>
            <div class="total-value">{{ count13 }}</div>
          </div>
          <div class="total-frame"  v-if="user.role===3">
            <img src="../assets/h.jpg"  class="total-icon">
            <div class="total-title">设备总数：</div>
            <div class="total-value">{{ count23 }}</div>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="total-frame" v-if="user.role===1">
          <img src="../assets/tab_function_default.jpg" class="total-icon">
          <div class="total-title">订购课程总数：</div>
          <div class="total-value">{{ count4 }}</div>
        </div>

          <div class="total-frame" v-if="user.role===2">
            <img src="../assets/tab_function_default.jpg" class="total-icon">
            <div class="total-title">订购课程总数：</div>
            <div class="total-value">{{ count14 }}</div>
          </div>
          <div class="total-frame" v-if="user.role===3">
            <img src="../assets/tab_function_default.jpg" class="total-icon">
            <div class="total-title">请假审批状态：</div>
            <div class="total-value">
              <span v-if="this.leave.status===3">已同意</span>
              <span v-if="this.leave.status===4">不同意</span>
            </div>
            <div class="total-value">
              {{this.leave.startDate}}至{{this.leave.endDate}}
            </div>
          </div>
        </el-col>

      </el-row>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";

export default {
  name: 'home',
  data() {
    return {
      orderCountDate: '',
      loading: false,
      dataEmpty: false,
      user:{},
      member:{},
      coach:{},
      count1:'',
      count2:'',
      count3:'',
      count4:'',
      count11:'',
      count12:'',
      count13:'',
      count14:'',
      count21:'',
      count22:'',
      count23:'',
      leave:{}
    }
  },
  created(){
    let userStr =sessionStorage.getItem("user") || '{}';
    this.user = JSON.parse(userStr);
    let str =sessionStorage.getItem("member") || '{}';
    this.member = JSON.parse(str);
    let strs =sessionStorage.getItem("coach") || '{}';
    this.coach = JSON.parse(strs);
//请求后端服务器，确认当前登录用户的合法性
    request.get("/api/user/"+this.user.id).then(res=>{
      if (res.code==='0'){
        this.user = res.data;
      }
    });
    this.load()
  },
  methods:{
    load(){
      if (this.member!=null){
        request.get("/api/member/getCount",{
          params: {
            memberId: this.member.id
          }
        }).then(res =>{
          this.count11=res.data.count1
          this.count12=res.data.count2
          this.count13=res.data.count3
          this.count14=res.data.count4
        })
      }
      if (this.user!=null){
        request.get("/api/user/getCount",{
          params: {
            userId: this.user.id
          }
        }).then(res =>{
          this.count1=res.data.count1
          this.count2=res.data.count2
          this.count3=res.data.count3
          this.count4=res.data.count4
        })
      }
      if (this.coach!=null){
        request.get("/api/coach/getCount",{
          params: {
            coachId: this.coach.id
          }
        }).then(res =>{
          this.count21=res.data.count1
          this.count22=res.data.count2
          this.count23=res.data.count3
          this.leave=res.data.leave
        })
      }

    },
    }
}
</script>

<style scoped>
.app-container {
  margin-top: 40px;
  margin-left: 120px;
  margin-right: 120px;
}
.total-layout {
  margin-top: 20px;
}
.total-frame {
  border: 2px solid #dcdde6;
  padding: 20px;
  height: 200px;
}

.total-title {
  position: relative;
  font-size: 19px;
  color: #611ee3;
  font-weight: bold;
  left: 70px;
  top: -50px;
}
.total-value {
  position: relative;
  font-size: 18px;
  color: #606266;
  font-weight: bold;
  left: 70px;
  top: -40px;
}
.total-icon {
  color: #409EFF;
  width: 60px;
  height: 60px;
  margin-top: 40px;
}

</style>
